<template>
    <div class="home-wrapper">
        <project-menu :detail="projectDetail" :pid="projectId"></project-menu>
        <div class="filters-wrapper">
            <div class="title total_title">
                <span>{{title}} - 标题<font class="total_title_back" @click="$router.go(-1)">/ 返回上一级</font></span>
                <div class="fr">
                    <!-- el-button v-if="projectDetail.status == 1" class="fl" size="small" @click="addTitle">新建标题
                    </el-button -->
                    <el-button v-if="projectDetail.status == 1" class="fr" style="margin-left: 10px;" type="primary" size="small"
                        @click="pldrawer = true">批量添加
                    </el-button>
                </div>
            </div>
            <el-table :data="headlinedata" border
                :header-cell-style="{'text-align':'center','background':'#f7f7f7','color':'#666'}" style="width: 100%">
                <el-table-column prop="id_index" width="50" align="center" label="编号">
                </el-table-column>
                <el-table-column prop="title" label="标题" align="center">
                </el-table-column>
                <el-table-column prop="update_time" label="更新时间" align="center">
                </el-table-column>
                <el-table-column prop="state" width="300" label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button v-if="projectDetail.status == 1" style="margin-left: 10px;" size="mini"
                            type="primary" @click="modifyTitleClick(scope.row)">修改</el-button>
                        <el-button v-if="projectDetail.status == 1" style="margin-left: 10px;" size="mini" type="danger"
                            @click="delClick(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-row type="flex" justify="end" style="margin-top: 20px;">
                <el-pagination background layout="prev, pager, next" :total="total" :page-size="pageSize"
                    :current-page.sync="curPage" @current-change="handleCurrentChange($event)">
                </el-pagination>
            </el-row>
            <!-- 分割线 -->
            <el-dialog :title="newprotitle.id <= 0 ? '新建标题' : '修改标题'" :visible.sync="addprotitle"
                :close-on-click-modal="false" width="35%" center>
                <el-row type="flex" align="middle" justify="center">
                    <el-form :model="newprotitle" ref="newprotitle" :rules="rules" style="width: 85%;">
                        <el-form-item class="is-required" prop="title">
                            <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 6}" maxlength="30" show-word-limit
                                placeholder="请输入标题" v-model="newprotitle.title">
                            </el-input>
                        </el-form-item>
                    </el-form>
                </el-row>
                <el-row type="flex" align="middle" justify="center">
                    <el-button size="small" @click="addprotitle = false">取 消</el-button>
                    <el-button size="small" type="primary" :loading="loading" @click="addTitleClick()">确定</el-button>
                </el-row>
            </el-dialog>
            <!-- 分割线 -->
            <el-drawer class="plTitle_wrap" size="600px" title="批量添加标题" :visible.sync="pldrawer" :wrapperClosable="false">
                <div class="plTitle_list">
                    <el-input v-for="(item ,index) in titles" :key="index" class="pl_title" maxlength="30" show-word-limit placeholder="请输入标题" v-model="item.title">
                    </el-input>
                </div>
                <el-row class="plTitle_fixd" type="flex" align="middle" justify="center">
                    <el-button @click="pldrawer = false">取 消</el-button>
                    <el-button type="primary" @click="addTitleClick(1)">确定</el-button>
                </el-row>
            </el-drawer>
        </div>
    </div>
</template>
<script>
    import {
        pageParams
    } from '@/settings'
    export default {
        data() {
            var validateTitle = (rule, value, callback) => {
                /*eslint no-useless-escape: "error"*/
                value = value.replace(/\r/g, "")
                let tmp = value.split(/\n|,/)
                for (var idx in tmp) {
                    let ele = tmp[idx]
                    if (ele.length > 30) {
                        callback(new Error('第' + (parseInt(idx) + 1) + '行 字符超过30个字符'))
                        return
                    }
                }
                callback()
            }
            return {
                loading: false,
                type: '',
                projectId: 0,
                projectDetail: {},
                headlinedata: [],
                pageSize: pageParams.pageSize,
                total: 0,
                curPage: 1,
                pldrawer: false,
                addprotitle: false,
                newprotitle: {
                    id: 0,
                    projectid: 0,
                    type: '',
                    title: ''
                },
                titles: [],
                rules: {
                    title: [{
                            required: true,
                            message: '请输入标题',
                            trigger: 'blur'
                        },
                        {
                            validator: validateTitle,
                            trigger: 'blur'
                        }
                    ]
                }
            }
        },
        created() {
            this.projectId = this.$router.currentRoute.params.id
            this.type = this.$router.currentRoute.params.type
            this.newprotitle.type = this.type
            if (this.type == 'project') {
                this.title = '项目素材库'
            } else {
                this.title = '个人素材库'
            }
            this.initTitleForm()
        },
        mounted() {
            this.loadData()
        },
        methods: {
            loadData() {
                this.$axios.get('/project/detail', {
                        projectid: this.projectId
                    })
                    .then(e => {
                        // console.log('项目详情', e.data)
                        this.projectDetail = e.data
                    })
                this.loadTitleData({})
            },
            loadTitleData(param) {
                param['number'] = this.pageSize
                param['type'] = this.type
                param['projectid'] = this.projectId
                if (!param['page']) {
                    param['page'] = this.curPage
                }
                this.$axios.get('/titile', param)
                    .then(e => {
                        this.headlinedata = e.data.items
                        this.total = e.data.total
                        // console.log('======', e.data)
                    })
            },
            initTitleForm() {
                this.titles = []
                for(let i = 0; i < 15; i++) {
                  this.titles.push({title: ''})
                }
            },
            handleCurrentChange(val) {
                this.curPage = val
                this.loadTitleData({
                    page: val
                })
            },
            addTitle() {
                this.newprotitle.projectid = this.projectId
                this.newprotitle.title = ''
                this.addprotitle = true
            },
            addTitleClick(t) {
                if (t == 1) {
                    let data = []
                    this.titles.forEach(ele => {
                        if (ele.title != '') {
                            data.push(ele.title)
                        }
                    })
                    if (data.length <= 0) {
                        return
                    }
                    this.newprotitle.projectid = this.projectId
                    this.newprotitle.title = data
                } else {
                    if (this.newprotitle.title == '') {
                        return
                    }
                }
                // this.$refs['newprotitle'].validate((valid) => {
                //    if (valid) {
                this.loading = true
                this.$axios.post('/titile/add', this.newprotitle)
                    .then((e) => {
                        this.initTitleForm()
                        this.pldrawer = false
                        this.loading = false
                        this.addprotitle = false
                        this.$message({
                            type: 'success',
                            message: e.msg ? e.msg : '操作成功!'
                        })
                        this.loadTitleData({})
                    })
                //    }
                //})
            },
            modifyTitleClick(item) {
                this.newprotitle.title = item.title
                this.newprotitle.projectid = this.projectId
                this.newprotitle.id = item.id
                this.addprotitle = true
            },
            delClick(item) {
                this.$confirm('此操作将删除该项, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios.post('/titile/delete', {
                            id: item.id,
                            type: this.type
                        })
                        .then((e) => {
                            this.$message({
                                type: 'success',
                                message: e.msg ? e.msg : '删除成功!'
                            })
                            this.loadTitleData({})
                        })

                }).catch(() => {});
            }
        }
    }
</script>
